<script setup>
import { Edit, Delete, Open } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { getEmployeeList,enableOrDisableEmployee } from '@/api/employee.js'
import { onMounted, ref } from 'vue'

const router = useRouter()

const name = ref('') // 员工姓名
const page = ref(1) // 当前页数
const pageSize = ref(10) // 每页显示的条目数量
const records = ref([]) // 员工列表数据
const total = ref(0) // 员工列表的总条目数量
const value1 = ref(true)

const loading = ref(false)

onMounted( async () => {
  await pageQuery()
})

//查询分页
const pageQuery = async () => {
  loading.value = true
  const params = {
    name: name.value,
    page: page.value,
    pageSize: pageSize.value
  }
  const res = await getEmployeeList(params)
  // console.log(res)
  total.value = res.data.data.total
  records.value = res.data.data.records
  // console.log(records.value)
  loading.value = false
}

//设置每页多少条
const handleSizeChange = val => {
  pageSize.value = val
  pageQuery()
}

//设置当前页
const handleCurrentChange = val => {
  page.value = val
  pageQuery()
}

//禁用启用
const handleStartOrStop = async (row) =>{
  if(row.username === 'admin'){
    ElMessage.error('admin为系统管理员不能更改状态')
    return
  }
  // console.log(row)
  const p = {
    id: row.id,
    status: !row.status ? 1 : 0 
  }
  
  await ElMessageBox.confirm('你确认修改当前员工状态吗','温馨提示',{
  type: 'warning',
  confirmButtonText: '确认',
  cancelButtonText: '取消'
 })
 const res = await enableOrDisableEmployee(p)
  // console.log(res)
  if(res.data.code === 1){
    ElMessage.success('员工状态修改成功！');
    pageQuery()
  }
  
}


//跳转到新增员工页面（组件）
const handleAddEmp = () => {
  //路由跳转，跳转到新增员工组件
  router.push('/employee/add')
}
 
//跳转修改员工修改组件   通过地址栏传递参数
const handleUpdateEmp = (row) =>{
  if(row.username === 'admin'){
    ElMessage.error('admin为系统管理员不能操作')
    return
  }

  router.push({
    path:'/employee/add',
    query: {id: row.id}
  })
}

</script>


<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 5px">
          员工姓名:
        </label>
        <el-input v-model="name" placeholder="请输入员工姓名" style="width: 15%" />
        <el-button type="primary" style="margin-left: 25px" @click="pageQuery()">查询</el-button>
        <el-button type="primary" style="float: right" @click="handleAddEmp">+添加员工</el-button>
      </div>

      <el-table v-loading="loading" :data="records" stripe style="width: 100%">
        <el-table-column prop="name" label="员工姓名" width="180">
        </el-table-column>
        <el-table-column prop="username" label="账号" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
        <el-table-column prop="status" label="账号状态">
          <template #default="scope">
            <span v-if="scope.row.status === 0">禁用</span>
            <span v-else>启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后操作时间">
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="{row, $index}">
            <el-button type="text" 
            @click="handleStartOrStop(row)">
            {{row.status === 1 ? '禁用' : '启用'}}
            </el-button>

            <el-button type="primary" :icon="Edit" circle plain @click="handleUpdateEmp(row)"> </el-button>
            <el-button type="danger" :icon="Delete" circle plain @click="onDeleteChannel(row, $index)"> </el-button>

          </template>
        </el-table-column>

      </el-table>

      <div class="demo-pagination-block">

        <el-pagination 
        :current-page="page" 
        :page-size="pageSize" 
        :page-sizes="[2, 4, 10, 40]" 
        :background="background" 
        layout="total, sizes, prev, pager, next, jumper," 
        :total="total" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" 
        prev-text="上一页" next-text="下一页" />
        
    
      </div>

     

    </div>

  </div>
</template>



<style lang="scss" scoped>
.tableBar {
  margin-bottom: 20px;
}

.demo-pagination-block {
  margin-top: 30px;
  float: right;
}
</style>